<template>
  <div>

    <lay-quote> 什么是JSON?   JSON是一种取代XML的数据结构，和xml相比，它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度。

那么,JSON到底是什么?

JSON就是一串字符串 只不过元素会使用特定的符号标注。

{} 双括号表示对象

[] 中括号表示数组

"" 双引号内是属性或值

: 冒号表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象)

所以 {"name": "Michael"} 可以理解为是一个包含name为Michael的对象

而[{"name": "Michael"},{"name": "Jerry"}]就表示包含两个对象的数组

当然了，你也可以使用{"name":["Michael","Jerry"]}来简化上面一部,这是一个拥有一个name数组的对象

PS：现在还有很多人存在一些误区,为什么{name:'json'}在检验时通过不了, 那是因为JSON官网最新规范规定，如果是字符串，那不管是键或值最好都用双引号引起来，所以上面的代码就是{"name":"json"}

不要反驳,官网就是这么定义的。</lay-quote>
  <div>

  </div>
    <div class='monacoContanier' :style="{ transform: true ? 'translateX(0)' : 'translateX(90%)' }"> 
        <div ref="monacoRef" class="monacoRef"></div>
    </div>
    <lay-button-group>
      <lay-button type="default" @click="jsonview('json',0)">json格式代</lay-button>
      <lay-button type="default" @click="jsonview('json',1)">json压缩</lay-button>
      <lay-button type="default" @click="jsonview('css',0)">css格式化</lay-button>
      <!-- <lay-button type="default">默认按钮</lay-button> -->
    </lay-button-group>
    <lay-quote>本工具使用的是Monaco Editor，Monaco Editor 是微软开源的基于 VS Code 的代码编辑器，运行在浏览器环境中。编辑器提供代码提示，智能建议等功能。供开发人员远程更方便的编写代码。</lay-quote>
  </div>
</template>
<script lang="ts" setup>
import { useAppStore } from '../../store/app';
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import * as monaco from 'monaco-editor'
import { layer } from "@layui/layer-vue";
// import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
// import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
// import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import prettier from 'prettier/standalone';
import parserHtml from 'prettier/parser-html';
import parserTypeScript from 'prettier/parser-typeScript';
import parserBabel from 'prettier/parser-babel';
import parserPostcss from 'prettier/parser-postcss';
const monacoRef = ref();
const appStore = useAppStore();
let editor :any;
onMounted(() => {

  nextTick(() => {
    import('monaco-themes/themes/Monokai.json')
      .then(data => {
        // @ts-ignore
        monaco.editor.defineTheme('monokai', data);
        monaco.editor.setTheme('monokai');

        editor = monaco.editor.create(monacoRef.value, 
        {
          language: 'json',
          value: `{data:[{"name": "Michael"},{"name": "Jerry"}]}`,
        
        }
        )
      
      })
  })


})
setTimeout(()=>{

    setValue(appStore.json.type,appStore.json.data,null)  ;
  },1000)
onUnmounted(() => {
  editor.dispose()
})

const jsonview=(v:string,i:any)=>{
  try{
    appStore.json={type:v,data:editor.getValue()}
  if(v=='json'&&i==0){
    setValue(v, JSON.parse(editor.getValue()),null);
    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
          validate: true,
	
});
  }
   if(v=='json'&&i==1){
    let J= editor.getValue();
    setValue(v, JSON.stringify(J) ,null);
    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
          validate: true,
	
});
  }
  if(v=='css'&&i==0){
    let J= editor.getValue();
    setValue(v, J ,null);
  }
  }catch(e){
    layer.msg('不支持：'+e, { icon: 2 });
  }

}


const setValue = (language:any, val:any, parser:any) => {
  if (val === '' || val === '[]') {
    return;
  }
  if (!parser) {
    parser = language;
  }
  monaco.editor.setModelLanguage(editor.getModel(), language);

  const code = prettier.format(val, {
    parser: parser,
    plugins: [parserHtml, parserTypeScript, parserBabel, parserPostcss],
    semi: false, // 语句末尾打印分号
    singleQuote: true, // 使用单引号
    vueIndentScriptAndStyle: false, // 是否缩进 Vue 文件中的 script 和 style 标签
    useTabs: true,
    tabWidth: 4
  });
  if(language=="json"){
  
//     monaco.editor.setModelLanguage().languages.json.jsonDefaults.setDiagnosticsOptions({
// 	validate: true,

// });

  }

  editor.setValue(code)
  //setTimeout(() => { editor.trigger('anyString', 'editor.action.formatDocument'); }, 100);
}
</script>
<style lang="less">

    .monacoContanier {
        width: 99%;
        height: 500px;
        position: relative;
        right: 0;
        top: 0;
        background-color: white;
        transition: all 0.3s ease-in-out;
        //z-index: 99;

        .monacoRef {
            width: 100%;
            height: 100%;
        }

      
    }
</style>